<template>
<div :style="{width: '100px'}">
    <div class="marquee">
		<div class="marquee-content" ref="content" :style="{transform: 'translate(' + num + 'px)'}">
			<ul>
				<li>不为谁而做的歌</li>
				<li>不潮不用花钱</li>
				<li>不流泪的机场</li>
				<li>不死之身</li>
			</ul>
		</div>
    </div>
</div>
</template>

<script>
export default {
	name: 'marquee',
	data(){
		return {
			num: 0
		}
	},
	methods: {
		marquee(){
			var content = this.$refs.content.firstChild;
			content.style.transform = 'translateX(0)';
			// var w = getComputedStyle(content, false).width;
			console.log(content)
		}
	},
	mounted(){
		this.marquee();
	}
}
</script>

<style scoped>
.marquee{
	height: 20px;
	font-size: 0;
}

.marquee-content{
	width: 100%;
	overflow: hidden;
	font-size: 16px;
	white-space: nowrap;
}

.marquee-content ul{
	overflow: hidden;
	width: 500px;
}

.marquee-content ul li{
	float: left;
	margin-right: 10px;
}
</style>
